import { View, Text, Image } from '@tarojs/components';
import { AtIcon } from 'taro-ui';

import chargeImg from '@/assets/images/user/icon/charge@2x.png';
import serviceImg from '@/assets/images/user/icon/service@2x.png';
import doneImg from '@/assets/images/user/icon/done@2x.png';
import closeImg from '@/assets/images/user/icon/close@2x.png';
import Taro from '@tarojs/taro';
import './style.scss';

const orderTypeList = [
  {
    img: chargeImg,
    title: '待付款',
    type: 1,
  },
  {
    img: serviceImg,
    title: '待服务',
    type: 2,
  },
  {
    img: doneImg,
    title: '已完成',
    type: 3,
  },
  {
    img: closeImg,
    title: '已关闭',
    type: 4,
  },
];
/**
 * 预约记录
 * @returns
 */
const AppointmentRecord = () => {
  const onGoApponitList = (appoint_status) => {
    Taro.navigateTo({
      url: `/subPages/appoint/index?appoint_status=${appoint_status}`,
    });
  };
  return (
    <View className="appointmen-wrap-wrap">
      <View className="title-wrap">
        <Text className="title">预约订单</Text>
        <View className="view-more" onClick={() => onGoApponitList(0)}>
          <Text>查看全部</Text>
          <AtIcon value="chevron-right" size={14} />
        </View>
      </View>
      <View className="type-list">
        {orderTypeList.map((item, index) => (
          <View key={index} onClick={() => onGoApponitList(item.type)} className="order-type-item">
            <Image mode="aspectFill" src={item.img} />
            <Text>{item.title}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};
export default AppointmentRecord;
